<template>
  <div class="page-content">
    <!-- @selectionChange -->
    <my-table
      v-bind="contentTableConfig"
      :listData="dataList"
      :listCount="dataCount"
      v-model:page="pageInfo"
    >
      <!-- handler中插槽 -->
      <template #headerHandler>
        <el-button
          v-if="isCreate"
          type="primary"
          size="medium"
          @click="handleNewClick"
          >新建用户</el-button
        >
        <el-button size="medium" icon="el-icon-refresh"></el-button>
      </template>
      <!-- 列中插槽 -->
      <template #status="scope">
        <el-button
          plain
          size="mini"
          :type="scope.row.enable ? 'success' : 'danger '"
          >{{ scope.row.enable ? '启用' : '禁用' }}</el-button
        >
      </template>
      <template #createAt="scope">
        <strong>{{ $filters.formatTime(scope.row.createAt) }}</strong>
      </template>
      <template #updateAt="scope">
        <strong>{{ $filters.formatTime(scope.row.updateAt) }}</strong>
      </template>
      <template #handler="scope">
        <div>
          <el-button
            v-if="isUpdate"
            icon="el-icon-edit"
            size="mini"
            type="primary"
            circle
            @click="handleEditClick(scope.row)"
          ></el-button>
          <el-button
            v-if="isDelete"
            icon="el-icon-delete"
            size="mini"
            type="danger"
            @click="handleDeleteClick(scope.row)"
            circle
          ></el-button>
        </div>
      </template>

      <!-- 动态中转插槽(跨组件插槽 例如在外部使用与内部相同名称的作用域插槽 本插槽仅供中间传值)-->
      <template
        v-for="item in otherPropSlots"
        :key="item.prop"
        #[item.slotName]="scope"
      >
        <template v-if="item.slotName">
          <!-- 用来接受外部非固定插槽 并由上方#动态插槽获取数据 -->
          <slot :name="item.slotName" :row="scope.row"></slot>
        </template>
      </template>
    </my-table>
  </div>
</template>

<script setup lang="ts">
import { useStore } from '@/store'
import { computed, ref, watch } from 'vue'

import MyTable from '@/base-ui/table'

import { usePermission } from '@/hooks/use-permissions'
const props = defineProps({
  contentTableConfig: {
    type: Object,
    required: true
  },
  pageName: {
    required: true,
    type: String
  }
})
const emit = defineEmits([`newBtnClick`, 'editBtnClick'])
const store = useStore()
//获取操作的按钮权限
const isCreate = usePermission(props.pageName, `create`)
const isUpdate = usePermission(props.pageName, `update`)
const isDelete = usePermission(props.pageName, `delete`)
const isQuery = usePermission(props.pageName, `query`)

//页数有关pageInfo
//监听值的变化并重新获取数据
const pageInfo = ref({ currentPage: 1, pageSize: 10 })

//发送网络请求
const getPageData = (queryInfo: any = {}) => {
  if (!isQuery) return
  store.dispatch(`system/getPageListAction`, {
    pageName: props.pageName,
    queryInfo: {
      offset: (pageInfo.value.currentPage - 1) * pageInfo.value.pageSize,
      size: pageInfo.value.pageSize,
      ...queryInfo
    }
  })
}
getPageData()
watch(pageInfo, () => getPageData())

//暴露该方法供父组件调用
defineExpose({
  getPageData
})
//从vuex获取数据
const dataList = computed(() =>
  store.getters[`system/pageListData`](props.pageName)
)
const dataCount = computed(() =>
  store.getters[`system/pageListCount`](props.pageName)
)

//动态获取非固定插槽
const otherPropSlots = props.contentTableConfig?.propList.filter(
  (item: any) => {
    if (
      item.slotName === `status` ||
      item.slotName === `createAt` ||
      item.slotName === `updateAt` ||
      item.slotName === `handler`
    )
      return false
    else {
      return true
    }
  }
)

//删除、编辑、新建有关操作
const handleDeleteClick = (item: any) => {
  store.dispatch(`system/deletePageDataAction`, {
    pageName: props.pageName,
    id: item.id
  })
}
const handleNewClick = () => {
  emit(`newBtnClick`)
}
const handleEditClick = (item: any) => {
  emit(`editBtnClick`, item)
}
</script>

<style scoped>
.page-content {
  padding: 20px;
  border-top: 20px solid #f5f5f5;
}
</style>
